<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>3.事件传参</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo">
			<h2>欢迎来到{{school}}</h2>
			<button @click="test1">按钮1（不传参数）</button>
			<button @click="test2(2,3,4)">按钮2（传参数）</button>
			<button @click="test3($event,3,4)">按钮3（传参数且还要用事件对象）</button>
			<button @click="test4(school)">按钮4（传递的参数也可以是data中的数据）</button>

			<!-- 下面这些写法，只有大傻帽才会这么写 -->
			<!-- <button @click="test1($event)">按钮</button> -->
			<!-- <button @click="test1()">按钮</button> -->
		</div>

		<script type="text/javascript">
			new Vue({
				el:'#demo',
				data:{
					school:'尚硅谷'
				},
				methods:{
					test1(e){ //会收到一个事件对象
						console.log(e)
						alert('同学你好1')
					},
					test2(n,a,b){ //会收到参数
						console.log(n,a,b)
						alert('同学你好'+n)
					},
					test3(e,n1,n2){ //会收到事件对象、其他参数
						console.log(e,n1,n2)
						alert('同学你好'+n1)
					},
					test4(str){ //会收到school数据
						console.log(str)
					}
				}
			})
		</script>
	</body>
</html>